<template>
	<view class="sportTest">
		<!-- 导航栏 -->
		<navBar :backFont="true" :title="'2022-2023学年国家体测'" >
		</navBar>	
		<view class="sports">
			<text class="title">体测项目</text>
			<view class="sportCard_list_con">
				<sportsCard class="sportsCard" width="18vw" height="18vw" title="力定跳远" :navigateUrl="'/pages/text/text'" :back_url=" '../../static/icons/long-jump.png'"></sportsCard>
				<sportsCard class="sportsCard" width="18vw" height="18vw"  title="100米" :navigateUrl="'/pages/text/text'" :back_url=" '../../static/icons/100-meter-dash.png'"></sportsCard>
				<sportsCard class="sportsCard" width="18vw" height="18vw" title="引体向上" :navigateUrl="'/pages/text/text'" :back_url=" '../../static/icons/pull-up.png'"></sportsCard>
				<sportsCard class="sportsCard" width="18vw" height="18vw" title="仰卧起坐" :navigateUrl="'/pages/text/text'" :back_url=" '../../static/icons/sit-up.png'"></sportsCard>
				<sportsCard class="sportsCard" width="18vw" height="18vw" title="跳绳" :navigateUrl="'/pages/text/text'" :back_url=" '../../static/icons/jump-rope.png'"></sportsCard>
				<sportsCard class="sportsCard" width="18vw" height="18vw" title="实心球" :navigateUrl="'/pages/text/text'" :back_url=" '../../static/icons/shot-put.png'"></sportsCard>
			</view>
		</view>
		<view class="sportTest_record">
			<text class="title">体测记录</text>
			<view class="condition">
				<view class="">
					<uni-icons class="classIcon" type="smallcircle" ></uni-icons>
					<text>2023/07/12</text>
				</view>
				<view class="right_btn">
					<text>查看全部</text>
					<uni-icons class="right_arrow" type="right" ></uni-icons>
				</view>
			</view>
			<view class="recordList_card_con">
				<view class="recordList_card" v-for="(item,index) in [1,2,3,4,5,6,7]">
					<view class="first_floor">
						<view class="first_floorLeft">
							<uni-icons class="classIcon" type="smallcircle" ></uni-icons>
							<text>高一1班</text>
						</view>
						<uni-icons class="more_icon" type="more-filled" ></uni-icons>
					</view>
					<view class="second_floor">
						<image class="img_record" src="../../static/icons/jump-rope.png" mode="widthFix"></image>
						<view class="second_floor_right">
							<text class="sports_item">跳绳</text>
							<view class="location">
								<uni-icons type="location-filled" ></uni-icons>
								<text>A/B</text>
							</view>
							<view class="uni-group">
								<Progress :progress="56"></Progress>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,reactive } from "vue";
	let reactive_obj = reactive({
		class_list:[
		]as any[],//班级列表
	})
	
	let loading = ref(false)

	const goAddFace = () => {
		uni.navigateTo({
			url:"/pages/addStudentsPicture/addStudentsPicture"
		})
	}
</script>

<style>
.sportTest{
	width: 100vw;
}
.sports{
	display: flex;
	flex-direction: column;
	width: 96vw;
	margin: 0 auto;
	margin-top: 13vh;
}
.title{
	display: block;
	margin: 2vh 0;
	font-size: 1.1rem;
	
}
.sportCard_list_con{
	display: flex;
	width: 96vw;
	flex-shrink: 0 ;
	overflow: auto;
	justify-content: flex-start;
	margin-top: 3vh;
}
.sportsCard{
	flex-shrink: 0 ;
	margin: 0 1vw;
	background-color: #fff;
}
.sportTest_record{
	display: flex;
	flex-direction: column;
	width: 96vw;
	margin: 0 auto;
	margin-top: 3vh;
}
.condition{
	display: flex;
	justify-content: space-between;
	margin: 2vh 0;
}

.recordList_card_con{
		display: flex;
		flex-wrap: wrap;
		width: 96vw;
		margin-bottom: 5vh;
	}
	.recordList_card{
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 1vw;
		width: 30vw;
		height: 30vh;
		box-sizing: border-box;
		padding: 0 1vw;
		margin-top: 2vh;
		margin-right: 2vw;
	}
	.first_floor{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 10vh;
		flex-shrink: 0;
		border-bottom: 1px solid #f8f8f8;
	}
	.first_floorLeft{
		display: flex;
		align-items: center;
		height: 100%;
		box-sizing: border-box;
	}
	.second_floor{
		display: flex;
		align-items: center;
		height: 20vh;
	}
	.img_record{
		display: block;
		width: 8vw;
		flex-shrink: 0;
		border-radius: 1vw;
	}
	
	.second_floor_right{
		width: 60%;
		display: flex;
		height: 90%;
		flex-direction: column;
		justify-content: space-evenly;
		margin-left: 3vw;
	}
	.sports_item{
		font-size: 1.1rem;
		font-weight: 400;
	}
	.uni-group{
		width: 15vw;
	}
	.classIcon{
		color: #0aa1ed !important;
		font-size: 1.1rem !important;
		margin-right: 1vw;
	}
	.more_icon{
		font-size: 1.2rem !important;
	}
</style>
